<template>
  <div class="page-dialog-info">
    <WmcDialog
      :title="title"
      v-model:dialogVisible="dialogVisible_"
      :width="width"
    >
      <template #info> {{ info }} </template>
    </WmcDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import WmcDialog from '@/render/base-ui/dialog'

export default defineComponent({
  components: {
    WmcDialog
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      defalut: '30%'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    info: {
      type: String,
      default: ''
    }
  },
  emits: ['update:dialogVisible'],
  setup(props, { emit }) {
    const dialogVisible_ = ref(props.dialogVisible)

    watch(
      dialogVisible_,
      (newValue) => {
        emit('update:dialogVisible', newValue)
      },
      {
        deep: true
      }
    )

    return { dialogVisible_ }
  }
})
</script>

<style scoped></style>
